<template>
  <div>
    <div class="senpoetry">
      <h3>一句诗词</h3>
      <button>❤ 点赞（999）</button>
    </div>
    <div class="content">
      <p>然亦安知所养何哉？</p>
      <p class="gary">《正气歌》</p>
      <p class="gary">文天祥</p>
       <div class="btn">
      <button>换一句</button>
    </div>
    </div>
    <div class="footer">
      <div class="footer-nav">
        <a href="#">关于</a><span>-</span><a href="#">反馈</a><span>-</span
        ><a href="/support.html">赞赏</a><span>-</span
        ><a href="https://www.iamwawa.cn/blog/5-weiapp.html">小程序</a
        ><span>-</span><a href="#">文章</a><span>-</span><a href="#">会员</a>
      </div>
      <p>
        Copyright © 2022 蛙蛙在线工具 版权所有
        <a href="https://beian.miit.gov.cn/" target="_blank"
          >粤ICP备18006158号</a
        >
      </p>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped lang="scss">
.senpoetry {
  width: 70%;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
}
.content {
  width: 80%;
  margin: 60px auto;
  text-align: center;
  p:nth-child(1) {
    font-size: 50px;
    margin-bottom: 30px;
  }
  .btn{
    width: 100px;
    margin:20px auto;
    button{
        width: 100px;
        height: 40px;
        font-size: 20px;
        color: #fff;
        background: #28a745;
        border: #28a745;
        border-radius: 20px;

    }
}
}
.footer {
  width: 80%;
  margin: auto;
  height: 100px;
 
  border-top: 1px solid #eee;
  font-size: 16px;
  color: #777;
  text-align: center;
  .footer-nav{
    margin:20px auto 10px;

  }

  a {
    padding: 5px;
    color: #333;
    text-decoration: none;
  }
  p{
    font-size: 12px;
    color: #777;
  }
}
</style>